<template>
  <div class="register-container">
    <div class="register-box">
      <div class="box-header">
        <h3>轻聘网 - 公司注册</h3>
      </div>
      <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="100px">
        <el-form-item label="公司名称" prop="name" style="width: 80%">
          <el-input v-model="registerForm.name" />
        </el-form-item>
        <el-form-item label="行业类型" prop="industryType" style="width: 80%">
          <el-input v-model="registerForm.industryType" />
        </el-form-item>
        <el-form-item label="公司规模" prop="companySize">
          <el-select v-model="registerForm.companySize" placeholder="请选择" style="width: 60%">
            <el-option
              v-for="item in companySizeOperations"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="融资阶段" prop="financing">
          <el-select v-model="registerForm.financing" placeholder="请选择" style="width: 60%">
            <el-option
              v-for="item in financingOperations"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="公司地址" prop="district">
          <v-region @values="regionChange" />
        </el-form-item>
        <el-form-item label="详细地址" prop="area" style="width: 80%">
          <el-input v-model="registerForm.area" />
        </el-form-item>
        <el-form-item label="通知邮箱" prop="email" style="width: 80%">
          <el-input v-model="registerForm.email" />
        </el-form-item>
        <el-form-item label="公司标志" prop="logo" style="width: 80%">
          <el-upload
            class="avatar-uploader"
            :action="uploadLogoUrl"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
            :before-upload="beforeLogoUpload"
          >
            <img v-if="logoUrl" :src="logoUrl" class="avatar">
            <el-button v-else size="small">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="营业执照" prop="license" style="width: 80%">
          <el-upload
            class="avatar-uploader"
            :action="uploadLicenseUrl"
            :show-file-list="false"
            :on-success="handleLicenseSuccess"
            :before-upload="beforeLicenseUpload"
          >
            <img v-if="licenseUrl" :src="licenseUrl" class="avatar">
            <el-button v-else size="small">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="公司介绍" prop="introduction" style="width: 80%">
          <el-input v-model="registerForm.introduction" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain icon="el-icon-s-promotion" @click="applyForCompany">立即申请</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { financingOperations, companySizeOperations } from '../../utils/constants'
import {
  createCompany
} from '@/api/register'
export default {
  name: 'CompanyRegister',
  data() {
    return {
      registerForm: {
        name: undefined,
        financing: undefined,
        companySize: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        area: undefined,
        email: undefined,
        logo: undefined,
        license: undefined,
        introduction: undefined,
        industryType: undefined
      },
      baseApi: process.env.VUE_APP_BASE_API,
      logoUrl: undefined,
      licenseUrl: undefined,
      uploadLogoUrl: process.env.VUE_APP_BASE_API + 'register/uploadLogo',
      uploadLicenseUrl: process.env.VUE_APP_BASE_API + 'register/uploadLicense',
      financingOperations: financingOperations,
      companySizeOperations: companySizeOperations,
      rules: {
        name: { required: true, message: '请输入公司名称', trigger: 'blur' },
        companySize: { required: true, message: '请选择公司规模', trigger: 'change' },
        financing: { required: true, message: '请选择融资阶段', trigger: 'change' },
        district: { required: true, message: '请选择所在城市', trigger: 'blur' },
        area: { required: true, message: '请输入详细地址', trigger: 'blur' },
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        logo: { required: true, message: '请上传公司LOGO', trigger: 'blur' },
        license: { required: true, message: '请上传营业执照', trigger: 'blur' },
        introduction: { required: true, message: '请填写公司介绍', trigger: 'blur' },
        industryType: { required: true, message: '请输入行业类型', trigger: 'blur' }
      }
    }
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#F2F5F4')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    regionChange(data) {
      if (data.province != null) {
        this.registerForm.province = data.province.value
      }
      if (data.city != null) {
        this.registerForm.city = data.city.value
      }
      if (data.area != null) {
        this.registerForm.district = data.area.value
      }
    },
    handleLogoSuccess(res) {
      this.logoUrl = this.baseApi + 'register/viewLogo/' + res.data
      this.registerForm.logo = res.data
    },
    handleLicenseSuccess(res) {
      this.licenseUrl = this.baseApi + 'register/viewLicense/' + res.data
      this.registerForm.license = res.data
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    beforeLogoUpload(file) {
      this.beforeUpload(file)
    },
    beforeLicenseUpload(file) {
      this.beforeUpload(file)
    },
    applyForCompany() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          createCompany(this.registerForm).then(
            (response) => {
              this.$alert('您的公司申请已提交，我们将于一个工作日内将申请结果发至您的邮箱中，请您注意查收。', '公司申请', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.push({ path: '/login' })
                }
              })
            },
            (error) => {
              this.$message.error(error.message)
            }
          )
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .register-container{
    height: 800px;
    margin-top: 50px;
  }
  .register-box {
    background: #ffffff;
    margin: 0 auto;
    width: 40%;
    padding-bottom: 20px;
  }
  .box-header {
    padding: 20px;
    text-align: center;
    color: #00b38a;
  }
  .avatar{
    width: 100px;
    height: 100px;
  }
</style>
